<html>
    <head></head>
    <style type="text/css">
        #box{width: 160px; height: 160px; position: absolute; left: 40%; top: 200px; background: #3780b1;
    border: 10px solid #00aaff;box-sizing: border-box;}
    </style>
    <body>
        <div id='box'></div>
          <script>
          var oDiv=document.getElementById('box')
                oDiv.onmousedown=function(ev){
                    var disX=ev.clientX-oDiv.offsetLeft
                    var disY=ev.clientY-oDiv.offsetTop

                    document.onmousemove=function(ev){
                    var l=ev.clientX-disX
                    var t=ev.clientY-disY

                    oDiv.style.left=l+'px'
                    oDiv.style.top=t+'px'
                    }
                    document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null
                    }
                }
</script>
    </body>
</html>